<template>
  <el-card class="box-card">
    <!--面包屑导航区</h3>-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome'}" >首页</el-breadcrumb-item>
      <el-breadcrumb-item >我的订单</el-breadcrumb-item>
    </el-breadcrumb>
    <!--搜索框-->

    <!--表格-->
    <el-table
        stripe
        :data="orderList"
        border
        height="600px"
        style="width: 100%">
      <el-table-column width="60px" type="index"></el-table-column>
      <el-table-column align="center" prop="orderNumber" label="订单号" width="200"></el-table-column>
      <el-table-column align="center" prop="hotelName" label="酒店名" width="150"></el-table-column>
      <el-table-column align="center" prop="roomType" label="类型" width="80">
        <template slot-scope="scope">
          {{ scope.row.roomType ? '标间' : '大床房' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="roomPrice" label="价格" width="80"></el-table-column>
      <el-table-column align="center" prop="roomNumber" label="房间号" width="80"></el-table-column>
      <el-table-column align="center" prop="orderStatus" label="订单状态" width="80">
        <template slot-scope="scope">
          {{ getOrderStatus(scope.row.orderStatus) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="hotelCity" label="所在城市" width="80"></el-table-column>
      <el-table-column align="center" prop="hotelAddress" label="地址" width="200"></el-table-column>

      <el-table-column align="left" label="操作" width="230">
        <template slot-scope="scope">
          <!-- 详情按钮 -->
          <el-tooltip class="item" effect="dark" content="详情" placement="top">
            <el-button type="info" size="mini" @click="toShowDialog(scope.row)">详情</el-button>
          </el-tooltip>

          <!-- 未支付时（orderStatus===0） -->
          <el-button type="warning" size="mini" v-if="scope.row.orderStatus===0" @click="pay(scope.row)">支付</el-button>
          <el-button type="success" size="mini" v-if="scope.row.orderStatus===0" @click="refund(scope.row,'取消')">取消</el-button>

          <!-- 已支付时（orderStatus===1）-->
          <el-button type="danger" size="mini" v-if="scope.row.orderStatus===1" @click="refund(scope.row,'退款')">退款</el-button>

          <!-- 已取消时（orderStatus===2） -->
          <el-button size="mini" v-if="scope.row.orderStatus===2" disabled>已取消</el-button>

          <!-- 已入住时（orderStatus===3） -->
          <el-button size="mini" v-if="scope.row.orderStatus===3" disabled>已入住</el-button>

          <!-- 已完成时（orderStatus===4）-->
          <el-button size="mini" v-if="scope.row.orderStatus===4" disabled>订单已完成</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--详细描述框-->
    <el-dialog
        :visible.sync="showDialog"
        width="50%"
        @close="showDialog = false"
    >
      <el-descriptions title="订单" :column='1'>
        <el-descriptions-item label="订单号">{{ orderData.orderNumber }}</el-descriptions-item>
        <!--        <el-descriptions-item label="订单状态">{{ orderData.orderStatus === 0 ? '未支付' : '已支付' }}</el-descriptions-item>-->
        <el-descriptions-item label="订单状态">{{ getOrderStatus(orderData.orderStatus) }}</el-descriptions-item>
        <el-descriptions-item label="购买人">{{ orderData.username }}</el-descriptions-item>
        <el-descriptions-item label="房间号">{{ orderData.roomNumber }}</el-descriptions-item>
        <el-descriptions-item label="房间类型">{{ orderData.roomType === 0 ? '大床房' : '标间' }}
        </el-descriptions-item>
        <el-descriptions-item label="价格">{{ orderData.roomPrice }}</el-descriptions-item>
        <el-descriptions-item label="酒店名">{{ orderData.hotelName }}</el-descriptions-item>
        <el-descriptions-item label="联系地址">{{ orderData.hotelAddress }}</el-descriptions-item>
        <el-descriptions-item label="酒店所在城市">{{ orderData.hotelCity }}</el-descriptions-item>
        <el-descriptions-item label="酒店电话">{{ orderData.hotelPhone }}</el-descriptions-item>
        <el-descriptions-item label="入住日期">{{ formatDate(orderData.checkInDate) }}</el-descriptions-item>
        <el-descriptions-item label="离店日期">{{ formatDate(orderData.checkOutDate) }}</el-descriptions-item>
        <el-descriptions-item label="订单生成时间">{{formatDate(orderData.createTime)}}</el-descriptions-item>
      </el-descriptions>
      <el-button type="primary" @click="showDialog=false">返回</el-button>
    </el-dialog>
  </el-card>
</template>

<script>
  import axios from "axios";

  export default {
    name:'MyOrder',
    data(){
      return{
        orderList:[],
        showDialog:false,
        orderData: {
          checkInDate: "",
          checkOutDate: "",
          hotelAddress: "",
          hotelCity: "",
          hotelName: "",
          hotelPhone: "",
          orderNumber: "",
          orderStatus: '',
          roomNumber: "",
          roomPrice: '',
          roomType: '',
          username: "",
          createTime:'',
        },
        //计算订单状态
        getOrderStatus(status) {
          switch (status) {
            case 0:
              return '未支付';
            case 1:
              return '已支付';
            case 2:
              return '已取消';
            case 3:
              return '已入住';
            case 4:
              return '已完成';
            default:
              return '未知状态';
          }
        },
      }
    },
    methods:{
      //格式化时间显示
      // formatDate(dateTimeString) {
      //   const dateTime = new Date(dateTimeString);
      //   // 返回格式化后的日期时间字符串
      //   return dateTime.toISOString().slice(0, 19).replace('T', ' ');
      // },
      formatDate(dateTimeString) {
        const dateTime = new Date(dateTimeString);
        // 检查日期是否有效
        if (isNaN(dateTime.getTime())) {
          return 'Invalid Date';
        }
        // 返回一个格式化的日期时间字符串，不包含秒和时区
        // 使用toLocaleString或自定义格式化方法
        return dateTime.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          hour12: false // 使用24小时制
        }).replace(/\//g, '-').replace(',', ''); // 根据需要替换字符或进一步格式化
      },
      //根据用户id获取订单信息
      async getOrderList(){
        const userId = JSON.parse(window.sessionStorage.getItem('user'))
        const url=`/api/order/userId?userId=${userId.id}`
        const {data: res}=await axios.get(url)
        if (res.code !== 0) {
          this.$message.error(res.description || res.message || "请稍后重试");
          return
        }
        this.orderList = res.data;
      },
      toShowDialog(row){
        this.showDialog = true;
        this.orderData = {...row};
      },
      //退款和取消
      async refund(row,string){
        const {data:res} = await axios.post('/api/order/setStatus',{
          id:row.id,
          orderStatus:2,
          roomId:row.roomId,
        });
        if(res.code !== 0){
          this.$message.error(res.description || "请联系酒店");
          return
        }
        if (string==='退款')
          this.$message.success("订单退款成功")
        else
          this.$message.success("订单取消成功")
        await this.getOrderList();
      },
      //支付
      async pay(row){
        const {data:res} = await axios.post('/api/order/setStatus',{
          id:row.id,
          orderStatus:1,
          roomId:row.roomId,
        });
        if(res.code !== 0){
          this.$message.error(res.description || "请联系酒店");
          return
        }
        this.$message.success("订单支付成功")
        await this.getOrderList();
      }
    },
    mounted() {
      this.getOrderList();
    }
  }
</script>
<style scoped>

</style>